<template>
  <div>
    <el-dialog
      :title="title"
      v-model="state.isShow"
      lock-scroll
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      draggable
      align-center
      width="500px"
      @closed="closed"
    >
      <ul>
        <li class="flex items-center rounded-[6px] mb-[10px]">
          <div class="w-[100px] pl-2 flex item justify-end">是否启用</div>
          <div class="flex-1 w-0 ml-[15px]">
            <el-radio-group v-model="form.Status">
              <el-radio :value="1" size="large">启用</el-radio>
              <el-radio :value="0" size="large">禁用</el-radio>
            </el-radio-group>
          </div>
        </li>
        <li class="flex items-center rounded-[6px] mb-[10px]">
          <div class="w-[100px] pl-2 flex item justify-end">排序</div>
          <div class="flex-1 w-0 ml-[15px]">
            <el-input-number
              v-model="form.Sort"
              class="!w-full"
              :min="0"
              controls-position="right"
            />
          </div>
        </li>
        <li class="flex items-center rounded-[6px]">
          <div class="w-[100px] pl-2 flex item justify-end">奖品类型</div>
          <div class="flex-1 w-0 ml-[15px]">
            <el-radio-group v-model="form.RewardType">
              <el-radio :value="1" size="large">奖金</el-radio>
              <el-radio :value="2" size="large">奖品</el-radio>
            </el-radio-group>
          </div>
        </li>
        <li class="flex items-center rounded-[6px] mb-[15px]">
          <div class="w-[100px] pl-2 flex item justify-end">奖金</div>
          <div class="flex-1 w-0 ml-[15px]">
            <el-input-number
              v-model="form.RewardAmount"
              class="!w-full"
              :min="0"
              :precision="2"
              controls-position="right"
            />
          </div>
        </li>
        <li class="flex items-center rounded-[6px] mb-[15px]">
          <div class="w-[100px] pl-2 flex item justify-end">中奖几率(%)</div>
          <div class="flex-1 w-0 ml-[15px]">
            <el-input-number
              v-model="form.Rate"
              class="!w-full"
              :min="1"
              :max="100"
              controls-position="right"
            />
          </div>
        </li>
        <li class="flex items-center rounded-[6px] mb-[15px]">
          <div class="w-[100px] pl-2 flex item justify-end">中奖数量</div>
          <div class="flex-1 w-0 ml-[15px]">
            <el-input-number
              v-model="form.Count"
              class="!w-full"
              :min="0"
              controls-position="right"
            />
          </div>
        </li>
        <li class="flex items-center rounded-[6px] mb-[10px]">
          <div class="w-[100px] pl-2 flex item justify-end">奖品备注</div>
          <div class="flex-1 w-0 ml-[15px]">
            <el-input class="!w-full" v-model="form.RewardRemark" />
          </div>
        </li>
      </ul>
      <template #footer>
        <el-button @click="closed">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { message } from "@/utils/message";

const props = withDefaults(
  defineProps<{
    data: DiscountRewardConfig | null;
  }>(),
  {
    data: null
  }
);
const emit = defineEmits(["update"]);
const title = computed(() => (props.data ? "编辑奖品" : "新增奖品"));
const state = reactive({
  isShow: false
});
const defaultForm = {
  RewardType: 1,
  RewardAmount: 0,
  RewardRemark: "",
  Rate: 0,
  Count: 0,
  Status: 1,
  Sort: 0
};

const form = reactive({ ...defaultForm });
const closed = () => {
  state.isShow = false;
};
const open = () => {
  if (props.data) {
    Object.assign(form, props.data);
  } else {
    Object.assign(form, defaultForm);
  }
  state.isShow = true;
};

const handleSubmit = async () => {
  if (!form.Sort && form.Sort != 0) {
    message.warning("请输入排序");
    return;
  }
  if (!form.RewardAmount && form.RewardAmount != 0) {
    message.warning("请输入奖金");
    return;
  }
  if (!form.Rate && form.Rate != 0) {
    message.warning("请输入中奖几率");
    return;
  }
  if (!form.Count && form.Count != 0) {
    message.warning("请输入中奖数量");
    return;
  }
  emit("update", form, props.data ? "edit" : "add");
  setTimeout(() => {
    closed();
  }, 200);
};

defineExpose({
  open
});
</script>
<style scoped lang="scss">
:deep() {
  .el-dialog__body {
    padding: 20px;
  }
  .el-input-number .el-input__inner {
    text-align: left !important;
  }
}
</style>
